<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <p>🎈</p>

        <script>
            let p = document.querySelector("p");
            let size;
            function setSize(newSize) {
                size = newSize;
                p.style.fontSize = size + "px";
            }
            setSize(20);

            function handleArrow(event) {
                if (event.key == "ArrowUp") {
                    if (size > 70) {
                        p.textContent = "💥";
                        document.body.removeEventListener("keydown", handleArrow);
                    } else {
                        setSize(size * 1.1);
                        event.preventDefault();
                    }
                } else if (event.key == "ArrowDown") {
                    setSize(size * 0.9);
                    event.preventDefault();
                }
            }
            document.body.addEventListener("keydown", handleArrow);
        </script>
    </body>

</html>